<template>
  <div class="m-description-base" :class="{ 'u-border': border }">
    <template v-for="item in rows">
      <div class="u-row" :class="{ 'u-inline': item.inline !== false }">
        <div class="u-label" :style="labelStyle">
          <slot :name="item.labelSlot">{{ item.label }}</slot>
        </div>
        <div class="u-content" :style="contentStyle">
          <slot :name="item.contentSlot">{{ contentFormatter(item) }}</slot>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup name="MDescriptionBase">
import { inject } from 'vue'

const props = defineProps({
  rows: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  border: Boolean, // 是否有边框
  labelStyle: {
    type: Object,
    default: () => ({}),
  },
  contentStyle: {
    type: Object,
    default: () => ({}),
  },
})

const emptyCellText = inject('emptyCellText')

function contentFormatter(col) {
  if (col.content) return col.content

  if (!props.data) return emptyCellText

  let content = props.data[col.prop]
  if (col.formatter) content = col.formatter(content)
  return content === null || content === undefined || content === '' ? emptyCellText : content
}
</script>

<style lang="stylus" scoped>
.m-description-base
  font-size 14px
  .u-row
    &.u-inline
      display flex
      .u-content
        flex 1
        padding 10px 0 10px 15px
    .u-label
      padding 10px 0
      width 90px
      color #4E5969
    .u-content
      color #2D2926
      word-wrap break-word
  &.u-border
    border-right 1px solid #eaeff4
    border-bottom 1px solid #eaeff4
    .u-label
      background #edf6fd
    .u-label,.u-content
      border-left 1px solid #eaeff4
      border-top 1px solid #eaeff4
</style>
